@extends('layouts.back_stage')
@section('content')
  <style>
 .alignTabel{text-align:center}
 [v-cloak] {display: none;}
  .touching{float:right;margin-right:30px;}
  .el-button+.el-button.picking{float:right;margin-right:15px;margin-left:0;}
  .tableBg{padding:30px;background:#fff;margin-top:10px;}
  .prev_l{text-align:center;margin-top:40px }
 p .el-transfer-panel__body{height:450px}
 .el-transfer-panel__body .el-transfer-panel__list.is-filterable{height:360px}
 .el-transfer .el-transfer-panel{width:250px}
 .el-dialog__body {padding:30px 20px}
 .ingred_sel{width:180px;margin-left:10px}
 b{float:right}
 p{margin:10px}
 .el-transfer{margin-top:20px}
 ::-webkit-scrollbar {height: 8px;}
 .el-tabs__nav{width:150px}
 .el-tabs__header .is-right{width:150px;}
  </style>
  <div class="container">
      <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">部门管理</h3></div>
        <div class="row" id="app" v-cloak>
            <el-button size="small" class="touching"  @click="adddialogV" type="primary">成员管理</el-button>
            <el-button size="small" class="picking" @click="addClient" type="primary">添加部门</el-button>
            <div class="col-md-12 row row-table-box">
                <div class="tableBg" style="margin-top:10px;">
                    <el-table :data="clientTabel" border size="mini" style="width: 100%">
                        <el-table-column fixed align="center" prop='prop' :resizable='false'label="序号" width="150"></el-table-column>
                        <el-table-column prop="department" label="部门" :resizable='false' align="center"></el-table-column>
                        <el-table-column fixed="right" label="操作"  :resizable='false' align="center" width="300">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="Datapost(scope)" >修改</el-button>
                                <el-button type="text" @click="remove(scope)" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="prev_l">
                        <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total"></el-pagination>
                    </div>
                </div>
                <div class="demo">
                    <el-dialog :visible.sync="dialogV" width="65%">
                        <p>
                            <el-tabs v-model='activeName'   :tab-position="tabPosition" @tab-click="handleClick" type="border-card" style="height: 525px;}">
                                <el-tab-pane  v-for="itme in arr"  :label='itme.department' :key='itme.id' :name="itme.id.toString()"></el-tab-pane>
                                    <template>
                                   
                                        <el-transfer v-model="value1" style="width:610px"  filterable :titles="['所有员工','部门员工']" :data="data"></el-transfer>
                                    </template>
                                </el-tabs>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary"  size="small"  @click="submitSection"> 确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <div>
                    <el-dialog title="修改" :visible.sync="updataDation" width="65%" :before-close="handleClose">
                        <div>
                                <label>部门名： &nbsp;</label>
                                <el-input  class="ingred_sel"  v-model="data_name"  maxlength="10"   size="small"  placeholder="请输入部门名"></el-input>
                                <label>所属机构 ：&nbsp;&nbsp;</label>
                                   <el-cascader style="width:280px;" :options="companyList" v-model="company_id" :change-on-select="true" size="small"></el-cascader>
                                <b>
                                    <el-button  class="touching"  @click="cancel" size="small" >取消</el-button>
                                    <el-button type="primary" class="touching" @click="updataSumit" size="small" >保存</el-button>
                                </b>
                            <el-transfer v-model  ="value2"   :titles="['所有员工','部门员工']" :data="data2"></el-transfer>
                         </div>
                    </el-dialog>
                </div>
           </div>
        </div>         
  </div>
 
  <script>
      new Vue({
        el: '#app',
      data() { 
        const generateData = _ => {
        const data2 = [];
        for (let i = 1; i <= 15; i++) {
          data2.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data2; 
      };
          return {
            data2: [],
            value2: [],
            company_id:[],
            companyList:[],
            clientTabel:[],//表格
            total:1,//分页
            data_name:"",//这个是修改对话框里面的部门
            updataDation: false,//
            dialogVisible: true,//这是删除弹出对话框
            dialogV:false,//新增对话框
            tabPosition: 'right',//成员管理对话框里的tabs
            itme:'',
            data: [],
            pageChange:'1',//这个是页数 
            value1: [],//所有的成员
            valueId:[],
            keyId:[],//用来装tabs的id
            idKey:'' ,
            arr:[],
            ids:'',//装电机修改时部门的id
            empl:[],
            dataId:[],//用来装穿梭框里的id
            emplTemp:[],
            activeName: '',
            arr2:[],//给后台的数据
            namelabel:''
          }
        },
      methods: {
        getCompanyList(){
           let that=this
           let list=[]
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: '/clients/getall',
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                      if(res.result.success){
                            for(let value of res.content[1]){
                                value['value'] = value.id
                                value['label'] = value.company_name
                                let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                if(child_data.length > 0){
                                    value['children'] = child_data
                                }
                            }
                            this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            })
                        }
                    }
                })
            },
        handleClose(done) {
            this.updataDation=false
      },
     // 取消
      cancel(){
        this.updataDation=false
      },
      //修改提交
      updataSumit(){
        var moder=/^[\u4e00-\u9fa5_a-zA-Z0-9_]{0,10}$/ 
                if(!moder.test(this.data_name)){
                this.$notify.error({
                    title: '提示',
                    message: '请输入0-10位以内的部门名',
                });
                return false;    
                }
        let that=this
        $.ajax({
              type:'post',
              url:'/departments/assign',
              dataType:'json',
              data:{
                id:that.ids,
                employee:that.value2,
                name:that.data_name
              },
              success:function(res){
                that.$message({
                      message: '成员配置成功',
                      type: 'success'
                    });
               }
          })
          that.postTabel();
          this.updataDation=false
          window.location.href='/departments/showpage'
      },
        // 点击修改
        Datapost(scope){
         let that=this
         let arr=[]
         this.ids=scope.row.id
         let arrey=[]
          $.ajax({
              type:'get',
              url:`/departments/members/${this.ids}`,
              dataType:'json',
              success:function(res){
                for(var e in res.content){
                    arr=res.content[e].members
                    that.data_name=res.content[e].department
                    that.company_id.push(res.content[e].company_id)
                }
                for(var key in arr){
                   arrey.push(arr[key].id)
                }
              }  
           })
                this.value2=arrey
                that.data2= that.empl
                this.updataDation=true
        },
        // 这个是成员管理的tab数据切换
        handleClick(tab, event) {
          var clientget=[]
          let that=this
        let ass = this.arr.filter(item=>{   
          return item.id==this.activeName
        })
        
         for(var e in ass){
           var tetst=ass[e].members
           for(var k in tetst){
            clientget.push(tetst[k].id)
           }
         }
        that.value1=clientget
        that.data= this.empl
        },
        //成员管理的提交
        submitSection(){
          let that=this
             $.ajax({
                type:'post',
                url:'/departments/assign',
                dataType:'json',
                data:{
                    id:this.activeName,
                    employee:this.value1
                },
                success:function(res){
                that.$message({
                            message: '成员配置成功',
                            type: 'success'
                        });
                    }
                })
                that.dialogV=false;
        },
        currentChange(val){
        this.pageChange=val
        this.postTabel();
        },
          //这是页面加载获取tabel的数据
        postTabel(){
              let that=this
                  $.ajax({
                      type:'get',
                      url:'/departments/index',
                      dataType:'json',
                      data:{
                        current_page:this.pageChange
                      },
                      success:function(res){
                         that.pageChange=res.content.current_page
                         that.total=res.content.total
                         i=-10;
                         var list=[]
                        for(var e in res.content.data){
                             i++;
                             list.push({
                                 'prop':i+(10*that.pageChange), 
                                 'department':res.content.data[e].department,
                                 'id':res.content.data[e].id
                             })
                        }
                         that.clientTabel=list
                       }
                  })
            },
            //点击成员管理弹出对话框
            adddialogV(){
              let that=this
              that.dialogV=true
                  $.ajax({
                      type:'get',
                      url:'/departments/members',
                      dataType:'json',
                      data:{
                        
                      },
                      success:function(res){
                        that.arr=res.content
                        that.data= that.empl
                      }
                  })
            },
            //所有员工
            employees(){
              let that=this
              var valueId=[]
              $.ajax({
                  type:'get',
                  url:'/departments/employees',
                  dataType:'json',
                  success:function(res){  
                    var empioyarr=res.content
                        for(let e in  empioyarr){
                            that.namelabel=empioyarr[e].admin_name
                         valueId.push(empioyarr[e].id,)
                         that.empl.push({
                                 key:empioyarr[e].id,
                                 label:empioyarr[e].admin_name
                            })    
                      } 
                   that.emplTemp = Object.assign([],that.empl);
                  }
              })
          },
           //点击删除按钮
            remove(scope) {
              let that=this
              that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                      $.ajax({
                          type:'delete',
                          url:`/departments/delete/${scope.row.id}`,
                          dataType:'json',
                          success:function(res){
                            that.postTabel();
                            that.$message({
                                  message: '删除成功',
                                  type: 'success'
                              });
                           }
                      })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
              },
              //点击新增页面
         addClient(){
                window.location.href='/departments/create';
               }
             },
       created(){
           this.postTabel();
           this.employees();
           this.getCompanyList();
          }
      })
  </script>
@endsection